<template>
    <div>v-on 事件绑定指令
        v-on语法： v-on:click="handleClick" 或 简写语法：@click="handleClick"
    </div>
    <h2>购物系统：统计购买数量 {{ count }}</h2>
    <button @click="count++">购买一件商品</button> &nbsp;
    <button @click="add">函数购买一件商品</button> &nbsp;
    <button @click="addcount(5)">购买5件商品</button>
    <hr>
    <a href="https://www.baidu.com" @click="one">点击去百度</a>
    &nbsp;
    <a href="https://m.jd.com" @click=btn(10,$event)>点击去京东</a>
    <hr>
    <h2>点击动态更改class属性</h2>
    <div :[attributes]="id">读取id的样式</div>
    <button @click="attributes='class'">点击更改选择器的样式</button>
    <!-- <p v-bind:id="id"></p> -->
    <h2>v-on 修饰符 .stop .pervent once</h2>
    <div class="fitlerone" @click="fitlerone">

        <button @click.stop="btns">阻止事件冒泡</button>
        <a href="http://www.baidu.com" @click.prevent="btns">默认阻止去百度</a>
        <button @click.once="btns">只执行一次</button>
    </div>
</template>

<script setup>

import { ref } from 'vue';

let count = ref(0)
const add = () => { 
    count.value++
}
const addcount = (num) => { 
    console.log(num, count.value);
    
    count.value += num
}
const one = (e) => { 
    e.preventDefault()
    console.log("阻止默认行为，不跳转页面");
    
}
const btn = (num, e) => { 
    console.log(num, e);
    count.value += num
    e.preventDefault()
}
// 动态把id的属性更改为 class属性
const id = ref('d1')
const attributes = ref("id")

const fitlerone = () => { 
    console.log("第一次执行");
    
}
const btns = () => { 
    console.log("btn执行了。。");
}
</script>

<style scoped>
#d1{
    color: red;
}
.d1{
    background-color: bisque;
    font-size: 20px;
    color: black;
}
</style>